---
title: Next.js
description: Règles de linting spécifiques à Next.js pour Ultracite.
---

La configuration Next.js contient des règles de linting spécifiques à Next.js pour l'optimisation des images, la structure du document et les patterns de l'App Router.

## Installation

Ajoutez la configuration Next.js à votre `biome.jsonc`:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/next"]
}
```

## Aperçu

Cette configuration ajoute des règles spécifiques au développement Next.js :

- **Optimisation des images**: Imposer l'utilisation du composant Image de Next.js
- **Structure du document**: Empêcher l'utilisation incorrecte des composants spéciaux de Next.js
- **Composants client**: S'assurer que les composants client asynchrones sont correctement gérés
- **Fichiers de configuration**: Traitement spécial pour les fichiers `next.config.*`

## Règles spécifiques à Next.js

### Expérimental

| Règle | Réglage | Description |
|------|---------|-------------|
| `noNextAsyncClientComponent` | `error` | Empêcher les composants client asynchrones dans Next.js. Les composants client doivent être synchrones ; utilisez des composants serveur pour les opérations asynchrones. |

### Performance

| Règle | Réglage | Description |
|------|---------|-------------|
| `noImgElement` | `error` | Interdire l'utilisation de l'élément HTML `<img>`. Utilisez plutôt le composant `<Image>` de Next.js pour l'optimisation automatique des images. |

### Style

| Règle | Réglage | Description |
|------|---------|-------------|
| `noHeadElement` | `error` | Interdire l'utilisation de l'élément HTML `<head>`. Utilisez `next/head` de Next.js ou l'API de métadonnées de l'App Router à la place. |

### Comportements suspects

| Règle | Réglage | Description |
|------|---------|-------------|
| `noDocumentImportInPage` | `error` | Empêcher l'importation de `next/document` dans les fichiers de page. `_document.tsx` ne doit exister que dans `pages/_document.tsx`. |
| `noHeadImportInDocument` | `error` | Empêcher l'importation de `next/head` dans `_document.tsx`. Utilisez `<Head>` provenant de `next/document` à la place. |

## Remplacements de fichiers de configuration

Le preset Next.js inclut un traitement spécial pour les fichiers de configuration et les composants de l'App Router :

### Fichiers de configuration Next.js

```jsonc
{
  "overrides": [
    {
      "includes": ["next.config.*"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Cela permet des modèles de configuration Next.js qui pourraient normalement ne pas passer les règles de linting.

### Pages et layouts de l'App Router

```jsonc
{
  "overrides": [
    {
      "includes": ["**/page.{ts,tsx,js,jsx}", "**/layout.{ts,tsx,js,jsx}"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Les composants de pages et de layout de l'App Router sont autorisés à être asynchrones sans nécessiter `await`, car Next.js les gère spécialement pour le rendu côté serveur et la récupération de données.